<template>
  <div class="warp">
    <swiper :options="swiperOption"  ref="mySwiper" >
      <swiper-slide :key="item.id" v-for="item in images"><img class="image" :src="item.imageUrl" /></swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'IndexSwiper',
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: 5000
      },
      images: [
        {id: 1, description: '门票', imageUrl: 'http://img1.qunarzz.com/piao/fusion/1810/76/3b0c44d5d5d37c02.jpg_750x200_5a0f8746.jpg'},
        {id: 2, description: '景点', imageUrl: 'http://img1.qunarzz.com/piao/fusion/1809/c6/2467595fffc3b302.jpg_750x200_cca13d51.jpg'},
        {id: 3, description: '水上乐园', imageUrl: 'http://img1.qunarzz.com/piao/fusion/1810/eb/5cacf42b59e91e02.jpg_750x200_9c0a77b0.jpg'}
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
  .warp >>>.swiper-pagination-bullet-active
    background-color: #fff
  .warp
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom 26.6%
    .image
      width: 100%
      height: 100%
</style>
